<template>
  <div class="all">
    <div class="title">
      <span>添加</span>
    </div>
    <div>
      date:<input type="text" v-model="date">
    </div>
    <div>
      id:<input type="text" v-model="id">
    </div>
    <div>
      description:<input type="text" v-model="description">
    </div>
    <div>
      total:<input type="text" v-model="total">
    </div>  
    <div class="btn">
      <button @click="add">确认</button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      date:"",
      id:1,
      description:"",
      total: ''
    }
  }, 
  methods: {
    add(){
      if(this.date&&this.id&&this.description&&this.total){
        let item = {
          date:this.date,
          id:Number(this.id),
          description:this.description,
          total: this.total
        }
        let index = this.$store.state.value.findIndex((elem)=>{
          return elem.id == item.id
        })
        if(index!=-1){
          alert("输入错误")
          return
        }
        this.$store.commit("add", item)
        this.$store.state.show = false
      }else{
        alert("输入错误")
      }
    }
  }
}
</script>

<style scoped>
.all{
  position: absolute;
  top: 20vh;
  left: 5vh;
  background-color: rgb(116, 191, 19);
  padding: 10px;
  border-radius: 15px;
  box-shadow: 5px 5px 15px gray;
}
.all div:not(.btn,.title){
  width: 500px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 3vh;
}
input{
  width: 300px;
}
.btn{
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
button{
  font-size: 24px;
}
.all{
  animation: move 1s 1;
}
@keyframes move{
  0%{
    transform: translateY(-300px);
  }100%{
    transform: translateY(0);
  }
}
.title{
  text-align: center;
  color:rgb(20, 40, 34);
  font-size: 3vh;
}
</style>
